"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = FlexExample;

var _react = _interopRequireDefault(require("react"));

var _design = require("@discuzq/design");

require("./index.scss");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Row = _design.Flex.Row,
    Col = _design.Flex.Col;

function FlexExample() {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "page"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "Flex \u5F39\u6027\u5E03\u5C40"), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u57FA\u672C\u7528\u6CD5"), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u5217\u5BBD\u5747\u5206"), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u6298\u884C\u5C55\u793A\uFF08\u9ED8\u8BA4\uFF09"), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u5355\u884C\u5C55\u793A\uFF08\u53EF\u6EDA\u52A8\uFF09"), /*#__PURE__*/_react.default.createElement(Row, {
    flexWrap: "nowrap"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 4
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 4
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 8
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u5D4C\u5957\u6805\u683C"), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 7
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 9
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 4
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 8
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }))))), /*#__PURE__*/_react.default.createElement(Col, {
    span: 3
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  })))))))), /*#__PURE__*/_react.default.createElement(Col, {
    span: 5
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  })), /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  })))))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u81EA\u5B9A\u4E49\u69FD\u5BBD"), /*#__PURE__*/_react.default.createElement(Row, {
    gutter: 0
  }, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "Offsets"), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 1,
    offset: 11
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 2,
    offset: 10
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 3,
    offset: 9
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 4,
    offset: 8
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 5,
    offset: 7
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 6,
    offset: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 7,
    offset: 5
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 8,
    offset: 4
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 9,
    offset: 3
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 10,
    offset: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  }))), /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 11,
    offset: 1
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-row"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u5782\u76F4\u65B9\u5411\u5BF9\u9F50"), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-large"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    align: "flex-start"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-large"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    align: "center"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-large"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box"
  })))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    align: "flex-end"
  }, /*#__PURE__*/_react.default.createElement(Col, {
    span: 6
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-large"
  })), /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box"
  }))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u6C34\u5E73\u5206\u5E03"), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-wrap"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    gutter: 0
  }, /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Start")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Center")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box End"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-wrap"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    justify: "flex-end",
    gutter: 0
  }, /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Start")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Center")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box End"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-wrap"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    justify: "center",
    gutter: 0
  }, /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Start")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Center")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box End"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-wrap"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    justify: "space-around",
    gutter: 0
  }, /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Start")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Center")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box End"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-wrap"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    justify: "space-between",
    gutter: 0
  }, /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Start")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Center")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box End"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-wrap"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    justify: "space-evenly",
    gutter: 0
  }, /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Start")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box Center")), /*#__PURE__*/_react.default.createElement(Col, {
    className: "flex-none"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "Box End")))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "section"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "header"
  }, "\u6392\u5E8F"), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, {
    reverse: true
  }, /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "1")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "2")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "3")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "4")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "5")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "6"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "1")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "2")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "3")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "4")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "5")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2,
    order: -1
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "6"))))))), /*#__PURE__*/_react.default.createElement("div", {
    className: "container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "box box-container"
  }, /*#__PURE__*/_react.default.createElement(Row, null, /*#__PURE__*/_react.default.createElement(Col, {
    span: 2,
    order: 1
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-nested"
  }, "1")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "2")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "3")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "4")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "5")), /*#__PURE__*/_react.default.createElement(Col, {
    span: 2
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "box-first"
  }, "6")))))))));
}